    <!-- 运营工单 -->
<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号">
          <el-input v-model="taskCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单转台">
          <el-select v-model="status" placeholder="请选择">
            <el-option label="待办" value="1" />
            <el-option label="进行" value="2" />
            <el-option label="取消" value="3" />
            <el-option label="完成" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 按钮 -->
      <el-row>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add"
        >新建</el-button>
        <el-button v-if="sonShow" type="primary" @click="WordDeploy">工单配置</el-button>
      </el-row>
      <!-- 内容 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="170" />
        <el-table-column prop="taskCode" label="工单编号" width="190" />
        <el-table-column prop="innerCode" label="设备编号" width="190" />
        <el-table-column
          prop="taskType.typeName"
          label="工单类型"
          width="190"
        />
        <el-table-column prop="createType" label="工单方式" width="190">
          <template #default="{ row }">
            <span>{{ createType[row.createType] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusName" label="工单状态" width="190" />
        <el-table-column prop="userName" label="运营人员" width="190" />
        <el-table-column prop="createTime" label="创建日期" width="190" />
        <!-- <el-table-column
          prop="operate"
          label="操作"
          width="147"
        /> -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看详情</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部 -->
      <div>
        <el-row>
          <el-col
            :span="18"
          >共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ ye.toFixed(0) }} 页
            <div
              class="grid-content bg-purple"
            /></el-col>
          <el-col :span="6">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                :disabled="show"
                @click="up"
              >上一页</el-button>
              <el-button
                type="primary"
                @click="under"
              >下一页<i
                class="el-icon-arrow-right el-icon--right"
              /></el-button>
            </el-button-group>
            <div
              class="grid-content bg-purple-light"
            /></el-col>
        </el-row>
      </div>
    </div>
    <!-- 添加的弹出层 -->
    <el-dialog
      title="新增工单"
      :visible="dialogFormVisible"
      width="500px"
      @close="foundAdd"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="departRules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备编号" prop="innerCode">
          <el-input v-model="ruleForm.innerCode" @input="val" />
        </el-form-item>
        <el-form-item label="工单类型" prop="productType">
          <el-select
            v-model="ruleForm.productType"
            placeholder="请选择活动区域"
          >
            <el-option v-if="sonShow" label="补货工单" value="2" />
            <div v-else>

              <el-option label="投放工单" value="1" />
              <el-option label="维修工单" value="3" />
              <el-option label="撤机工单" value="4" />
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量">
          <div class="el-icon-s-claim addClick" @click="goodsList">
            <a>补货清单</a>
          </div>
        </el-form-item>
        <el-form-item label="运营人员" prop="assignorId">
          <el-select v-model="ruleForm.assignorId" placeholder="请选择运营人员">
            <el-option
              v-for="item in userNum"
              :key="item.assignorId"
              :label="item.userName"
              :value="item.assignorId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="foundAdd">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详细信息 -->
    <el-dialog
      title="工单详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 头部 -->
      <div class="title">
        <img :src="detailedIc" alt="">
        <span> {{ jobDetails.statusName }}</span>
        <img :src="detailedPic" alt="" class="pic">
      </div>
      <!-- 内容 -->
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>设备编号：{{ jobDetails.innerCode }}</div></el-col>
        <el-col
          :span="12"
        ><div>创建日期：{{ jobDetails.createTime }}</div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>取消日期：{{ jobDetails.updateTime }}</div></el-col>
        <el-col
          :span="12"
        ><div>运营人员：{{ jobDetails.userName }}</div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col
          :span="12"
        ><div>工单类型：{{ jobDetails.typeName }}</div></el-col>
        <el-col
          :span="12"
        ><div>
          补货数量：<a class="bhxq" @click="addDetails">补货详情</a>
        </div></el-col>
      </el-row>
      <el-row class="gd">
        <el-col :span="12"><div>工单方式：手动</div></el-col>
        <el-col
          :span="12"
        ><div>取消原因：{{ jobDetails.desc }}</div></el-col>
      </el-row>
      <el-row v-if="jobDetails.taskStatus !== 4" class="cxcj">
        <el-button type="warning" @click="btnFn(jobDetails)">{{
          btnTxt
        }}</el-button>
      </el-row>
    </el-dialog>
    <!-- 添加那里的补货详情 -->
    <el-dialog
      title="补货详情"
      :visible="goodsShow"
      width="50%"
      :before-close="goodsFn"
    >
      <el-table :data="goodsData" style="width: 100%" height="250">
        <el-table-column
          fixed
          prop="channelCode"
          label="货道编号"
          width="120"
        />
        <el-table-column prop="skuName" label="商品名称" width="120" />
        <el-table-column prop="currentCapacity" label="当前数量" width="120" />
        <el-table-column prop="Num" label="还可以添加" width="120" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- <el-button type="text" size="small" @click="handleClick(scopes.row)">查看详情</el-button> -->
            <el-input-number
              v-if="row.maxCapacity"
              v-model="row.maxCapacity"
              controls-position="right"
              :min="0"
              :max="10"
              @change="handleChange(row)"
            />
            <span v-else>没有数据</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详细信息里的补货详情 -->
    <el-dialog
      title="补货详情"
      :visible.sync="addShows"
      width="40%"
      :before-close="addShowsx"
    >
      <el-table :data="AddTableData" height="250" border style="width: 100%">
        <el-table-column prop="channelCode" label="货到编号" width="180" />
        <el-table-column prop="skuName" label="商品" width="180" />
        <el-table-column prop="expectCapacity" label="补货数量" />
      </el-table>
    </el-dialog>
    <!-- 工单配置 -->
    <el-dialog
      title="工单配置"
      :visible.sync="WorkConfiguration"
      width="30%"
      :before-close="wfFn"
    >
      <span>补货警戒线</span><el-input-number
        v-model="warning"
        size="large"
        :min="10"
        :max="100"
        @change="handleChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="WorkConfiguration = false">取 消</el-button>
        <el-button type="primary" @click.stop="threshold">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { searchApi, vendingMachine, thresholdValue, alertValueFn, addVending, addWorkOrder, delWork, replenishmentDetails } from '@/api'
export default {
  props: {
    sonShow: {
      type: Boolean,
      default: true
    }},
  data() {
    return {
      warning: '', // 警戒线
      WorkConfiguration: false, // 工单配置
      // 接受taskId
      taskId: '',
      AddTableData: [],
      addShows: false, // 详细信息里的补货详情
      createType: {
        0: '自动',
        1: '手动'
      },
      num: 10, // 计数器
      // 补货详情的数据
      // {
      //   channelCode: '', // 货道编号
      //   skuName: '', // 商品名称
      //   currentCapacity: '', // 当前数量
      //   Num: '', // 还可添加
      //   maxCapacity: ''// 添加的
      // }
      btnTxt: '', // 详细信息下面的按钮
      goodsData: [], // 补货详情的数据
      goodsShow: false, // 添加捕获信息窗口
      detailedPic: '', // 工单详情的图片
      detailedIc: '', // 工单详情的icon
      jobDetails: {}, // 点击查看详情返回的数据
      dialogVisible: false, // 详细信息的弹出
      userNum: [],
      dialogFormVisible: false, // 控制添加的弹出层
      status: '',
      taskCode: 0, // 工单编号 --绑定输入框
      show: true, // 按钮禁用
      pageIndex: 1,
      ye: 0, // 页数
      totalCount: 0, // 总数
      tableData: [],
      formInline: {
        user: '',
        region: ''
      },
      // 添加绑定的 内容
      ruleForm: {
        innerCode: '', // 设备编号
        userId: 1, // 执行人id
        productType: '', // 工单类型
        desc: '', // 备注
        details: [], // 补货清单
        createType: 1, // 默认
        assignorId: '' // 工单负责人id
      },
      details: [], // 补货清单(转接)
      // 验证规则
      departRules: {
        innerCode: [
          { required: true, message: '设备编号不能为空', trigger: 'blur' },
          { min: 1, max: 15, trigger: 'blur', message: '设备编号为1~15' }
        ],
        userId: [
          { required: true, message: '运营人员不能为空', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '工单类型不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '工单类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.tableData = await this.searchApis()
    console.log(this.totalCount)
  },

  methods: {
    // 工单配置的确定
    async threshold() {
      const res = await thresholdValue({ alertValue: this.warning })
      console.log(res)
      this.wfFn()
    },
    wfFn() {
      // 工单配置的关闭方法
      this.WorkConfiguration = false
    },
    // 工单配置
    async WordDeploy() {
      this.WorkConfiguration = true
      const res = await alertValueFn()
      console.log(res)
      this.warning = res.data
    },
    // 详细信息里的补货详情
    async addDetails() {
      this.addShows = true
      const { data } = await replenishmentDetails(this.taskId)
      console.log(data)
      this.AddTableData = data
    },
    // 详细信息里的补货详情的关闭方法
    addShowsx() {
      this.addShows = false
    },
    foundAdd() {
      // 新增表单的关闭方法
      this.dialogFormVisible = false
      this.$refs.ruleForm.resetFields()
      this.ruleForm.innerCode = ''
      this.ruleForm.productType = ''
      this.ruleForm.assignorId = ''
      this.ruleForm.desc = ''
      this.ruleForm.details = ''
    },
    // 详细信息下面的按钮
    btnFn(val) {
      // console.log(val)
      if (val.taskStatus === 3) {
        this.ruleForm.innerCode = val.innerCode
        this.val()
        this.ruleForm.productType = val.productTypeId.toString()
        this.ruleForm.assignorId = val.userId.toString()
        this.ruleForm.desc = val.desc
        this.ruleForm.details = this.details
        this.dialogFormVisible = true
        // this.
      } else if (val.taskStatus === 1) {
        // console.log(val.taskId)
        this.$confirm('取消工单后，将不能恢复，是否确认取消？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await delWork(val.taskId, { taskId: val.taskId, desc: val.desc })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.searchApis()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 提交补获清单的数据
    addGoods() {
      this.ruleForm.details = this.details
      console.log(this.ruleForm.details)
      this.goodsShow = false
    },
    // 计数器改变时触发
    handleChange(val) {
      this.details.forEach((item, i) => {
        if (item.channelCode === val.channelCode) {
          item.expectCapacity = val.maxCapacity
        }
      })
      console.log(val)
    },
    // 添加里面的捕获信息的关闭方法
    goodsFn() {
      this.goodsShow = false
    },
    // 提交确定
    async addSubmit() {
      // 兜底校验
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        const res = await addWorkOrder({ ...this.ruleForm })
        console.log(res)
        this.foundAdd()
      })
    },
    // 点击x关闭
    handleClose() {
      this.dialogVisible = false
    },
    // 点击add里的捕获清单
    goodsList() {
      this.goodsShow = true
    },
    handleClick(val) {
      console.log(val)
      // 查看详情
      this.taskId = val.taskId
      console.log(this.taskId)
      // console.log(val)
      if (val.taskStatusTypeEntity.statusId === 1) {
        // 待办
        this.btnTxt = '取消工单'
        this.detailedIc =
          ''
        this.detailedPic =
          'http://likede2-admin.itheima.net/img/pic_1.834b274c.png'
      } else if (val.taskStatusTypeEntity.statusId === 3) {
        // 取消
        this.btnTxt = '重新创建'
        this.detailedIc =
          ''
        this.detailedPic =
          'http://likede2-admin.itheima.net/img/pic_3.e8208e34.png'
      } else if (val.taskStatusTypeEntity.statusId === 4) {
        // 完成
        this.detailedIc =
          ''
        this.detailedPic =
          'http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png'
      }
      this.jobDetails = val
      this.dialogVisible = true
    },
    // 添加输入框 改变
    async val() {
      const res = await addVending(this.ruleForm.innerCode)
      console.log(res)
      // this.details = res.data
      res.data.forEach((item) => {
        if (item.sku) {
          this.details.push({
            channelCode: item.channelCode,
            expectCapacity: item.maxCapacity,
            skuId: item.skuId,
            assignorId: item.userId,
            skuImage: item.sku.skuImage,
            skuName: item.sku.skuName
          })
          this.goodsData.push({
            channelCode: item.channelCode,
            skuName: item.sku.brandName,
            currentCapacity: item.currentCapacity,
            Num: 10 - item.currentCapacity,
            maxCapacity: item.maxCapacity
          })
        } else {
          this.goodsData.push({
            channelCode: item.channelCode,
            skuName: '-',
            currentCapacity: '-',
            Num: '-'
          })
        }
        // console.log(this.goodsData)
      })
      console.log(res)
      const { data } = await vendingMachine(this.ruleForm.innerCode)
      // console.log(res)
      this.userNum = data
    },
    // 增加
    add() {
      this.dialogFormVisible = true
    },
    async searchApis(pageIndex, pageSize, taskCode, status) {
      const { data } = await searchApi({
        pageIndex: pageIndex,
        pageSize: pageSize,
        taskCode: taskCode,
        status: status
      })
      this.totalCount = data.totalCount
      this.ye = data.totalCount / 10
      data.currentPageRecords.forEach((item, index) => {
        // item['id'] = index + 1
        data.currentPageRecords[index] = {
          ...item,
          ...{
            id: index + (this.pageIndex * 10 - 10) + 1,
            typeName: item.typeName,
            statusName: item.taskStatusTypeEntity.statusName
          }
        }
      })
      // console.log(data.currentPageRecords)
      return data.currentPageRecords
    },
    // 点击查询触发
    async onSubmit() {
      this.tableData = await this.searchApis(
        '',
        '',
        this.taskCode,
        this.status
      )
      console.log(this.tableData)
    },
    // 上一页
    async up() {
      if (this.pageIndex <= 1) {
        this.show = true
        return
      }
      this.show = false
      this.tableData = await this.searchApis(--this.pageIndex, 10)
    },
    // 下一页
    async under() {
      this.show = false
      this.tableData = await this.searchApis(++this.pageIndex, 10)
    }
  }
}
</script>

<style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
  .content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
  }
}
.title {
  padding: 20px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .pic {
    margin-left: 220px;
  }
}
.gd {
  margin-top: 10px;
}
.cxcj {
  margin-left: 160px;
  margin-top: 30px;
}
.addClick {
  color: #567eff;
}
.bhxq {
  color: rgb(65, 130, 221);
}
</style>
